<template>
  <div class="component-wallet-log-trading">
    <div class="search-bar">
      <el-form
        clearable
        :inline="true"
        :model="dataFrom"
        class="search-form"
        @submit.prevent
      >
        <div class="input-row">
          <el-form-item :label="$t('chat.orderNumber') + ':'">
            <el-input
              v-model="dataFrom.orderNumber"
              maxlength="20"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              clearable
              :placeholder="$t('chat.orderNumber')"
            />
          </el-form-item>
          <el-form-item :label="$t('order.refundId') + ':'">
            <el-input
              v-model="dataFrom.refundSn"
              maxlength="19"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              clearable
              :placeholder="$t('order.refundId')"
            />
          </el-form-item>
          <el-form-item :label="$t('shop.ioType') + ':'">
            <el-select
              v-model="dataFrom.ioType"
              clearable
              :placeholder="$t('shop.ioType')"
            >
              <el-option
                v-for="item in ioType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('prodList.shopName') + ':'">
            <el-input
              v-model="dataFrom.shopName"
              maxlength="19"
              clearable
              :placeholder="$t('prodList.shopName')"
            />
          </el-form-item>
          <el-form-item :label="$t('shop.amountType') + ':'">
            <el-select
              v-model="dataFrom.amountType"
              clearable
              :placeholder="$t('shop.amountType')"
            >
              <el-option
                v-for="item in amountType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('shop.reason') + ':'">
            <el-select
              v-model="dataFrom.reason"
              style="min-width: 240px;"
              clearable
              :placeholder="$t('shop.reason')"
            >
              <el-option
                v-for="item in reason"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('formData.timeLimit') + ':'"
            class="date-range-param"
          >
            <el-select
              v-model="datePickerType"
              class="date-picker-type"
              @change="setdatePickerType(datePickerType)"
            >
              <el-option
                v-for="item in datePickerTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-model="dateRangeParam"
              :type="datePickerType"
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                              new Date(2000, 2, 1, 23, 59, 59)]"
              :range-separator="$t('date.tip')"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
              @change="changeDateRangeParam"
            />
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSubmit(true)"
            >
              {{ $t('order.query') }}
            </div>
            <div
              class="default-btn"
              @click="clear"
            >
              {{ $t('order.clear') }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main-container">
      <div class="table-con">
        <el-table
          :data="tableData"
          style="width: 100%"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
        >
          <!-- scope.$index -->
          <el-table-column
            type="index"
            :label="$t('sysManagement.serialNumber')"
            width="80"
          />
          <el-table-column
            prop="operation"
            :label="$t('shop.amountType')"
            width="120"
          >
            <template #default="scope">
              <span>{{ [$t('shop.amoSett'), $t('shopWallet.platfromIncomeAmount')][scope.row.amountType] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="changeAomunt"
            :label="$t('shop.changeAomunt')"
            width="120"
          >
            <template #default="scope">
              <span v-if="scope.row.changeAomunt > 0"> {{ ['-', '+'][scope.row.ioType] }} </span>
              <span>￥{{ scope.row.changeAomunt }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderNumber"
            :label="$t('chat.orderNumber')"
            width="200"
          >
            <template #default="scope">
              <div>{{ scope.row.orderNumber || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="refundSn"
            :label="$t('order.refundId')"
            width="200"
          >
            <template #default="scope">
              <div>{{ scope.row.refundSn || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="userAmount"
            :label="$t('shopWallet.operationAmount')"
            width="120"
          >
            <template #default="scope">
              <span>{{ scope.row.userAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformAmount"
            :label="$t('settlementDetail.platformShareReduce')"
            width="120"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.platformAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="shopReduceAmount"
            :label="$t('settlementDetail.multishopReduce')"
            width="120"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.shopReduceAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="distributionAmount"
            :label="$t('shopWallet.distributionAmount')"
            width="120"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.distributionAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformCommission"
            :label="$t('shopWallet.platformCommission')"
            min-width="120"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.platformCommission }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="reason"
            :label="$t('shopWallet.amountChangeReason')"
            min-width="180"
          >
            <template #default="scope">
              <span>{{
                [$t('shop.userPay'), $t('shopWallet.orderSettlement'), $t('shopWallet.applyRefund'), $t('shopWallet.rejectApplyRefund')][scope.row.reason]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('shopFeature.chooseFeature.createTime')"
            min-width="160"
          />
          <el-table-column
            prop="operation"
            :label="$t('text.menu')"
            align="center"
            fixed="right"
            width="150"
          >
            <template #default="scope">
              <div
                class="default-btn text-btn"
                :class="{ 'disabled-btn': !scope.row.orderNumber && !scope.row.refundSn }"
                @click="handleDetail(scope.row.orderNumber, scope.row.refundSn, scope.row.reason)"
              >
                {{ $t('user.details') }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页条 -->
      <el-pagination
        v-if="total > 0"
        :current-page="params.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'

const props = defineProps({
  load: {
    type: String,
    default: '0'
  }
})

const Data = reactive({
  theData: null, // 保存上次点击查询的请求条件

  time: '',
  activeName: 'second',
  total: 0,
  params: {
    current: 1,
    size: 10
  },
  datePickerType: 'daterange', // 日期筛选类型
  dateRangeParam: null,
  ioType: [{
    value: 0,
    label: $t('shop.pay')
  }, {
    value: 1,
    label: $t('shop.income')
  }],
  amountType: [{
    value: 0,
    label: $t('shop.amoSett')

  }, {
    value: 1,
    label: $t('shopWallet.platfromIncomeAmount')
  }], // '未结算金额', '可提现金额', '冻结金额'
  datePickerTypeOptions: [
    {
      label: $t('date.daterange'),
      value: 'daterange'
    },
    {
      label: $t('date.monthrange'),
      value: 'monthrange'
    }
  ],
  reason: [
    {
      value: 0,
      label: $t('shop.userPay')
    },
    {
      value: 1,
      label: $t('shopWallet.orderSettlement')
    },
    {
      value: 2,
      label: $t('shopWallet.applyRefund')
    }
  ],
  dataFrom: {
    ioType: '',
    amountType: '',
    orderNumber: '',
    refundSn: '',
    reason: '',
    startTime: '',
    endTime: ''
  },
  tableData: [{
    balance: 111
  }],

  isload: props.load
})

const { total, params, datePickerType, dateRangeParam, ioType, amountType, datePickerTypeOptions, reason, dataFrom, tableData } = toRefs(Data)

onMounted(() => {
  getData()
})

// 获取列表数据
const getData = (newData = false) => {
  if (newData || !Data.theData) {
    Data.theData = { ...Data.dataFrom, ...Data.params }
  } else {
    Data.theData = { ...Data.theData, ...Data.params }
  }

  // 判断是否为详情页返回
  if (Data.isload === '0') {
    localStorage.setItem('bbcWalletLogSearch', JSON.stringify(Data.theData))
  } else {
    Data.theData = JSON.parse(localStorage.getItem('bbcWalletLogSearch'))
    Data.params = {
      current: Data.theData.current,
      size: Data.theData.size
    }
    Data.dataFrom = {
      ioType: Data.theData.ioType,
      amountType: Data.theData.amountType,
      orderNumber: Data.theData.orderNumber,
      refundSn: Data.theData.refundSn,
      reason: Data.theData.reason
    }
  }
  Data.isload = '0'

  http({
    url: http.adornUrl('/shop/shopWallet/pagePlatformInfo'),
    method: 'get',
    params: Data.theData
  }).then(({ data }) => {
    Data.tableData = data.records
    Data.total = data.total
  })
}

const changeDateRangeParam = () => {
  Data.dataFrom.startTime = Data.dateRangeParam ? Data.dateRangeParam[0] : ''
  Data.dataFrom.endTime = Data.dateRangeParam ? Data.dateRangeParam[1] : ''
}

const setdatePickerType = (val) => {
  Data.datePickerType = val
}

// 查询
const onSubmit = (newData = false) => {
  Data.params.current = 1
  getData(newData)
}

const handleSizeChange = (val) => {
  Data.params.size = val
  getData()
}

const handleCurrentChange = (val) => {
  Data.params.current = val
  getData()
}

const router = useRouter()
// 跳转到详情页
const handleDetail = (orderNumber, refundSn, reason) => {
  router.push({
    path: '/finance/billing-details/index',
    query: {
      path: 0,
      orderNumber,
      refundSn,
      reason
    }
  })
}

// 清空查询 的表单
const clear = () => {
  Data.dataFrom = {
    ioType: '',
    amountType: '',
    orderNumber: '',
    refundSn: '',
    reason: '',
    shopName: '',
    startTime: '',
    endTime: ''
  }
  Data.dateRangeParam = null
}
</script>

<style lang="scss" scoped>
.component-wallet-log-trading {
  .date-picker-type {
    width: 120px !important;
  }

  :deep(.date-picker-type .el-input--suffix) {
    width: 120px !important;
  }

  :deep(.el-range-separator) {
    width: 18px;
  }

  :deep(.el-date-editor--daterange) {
    width: 300px !important;
  }
}
</style>
